window.addEventListener('DOMContentLoaded', function() {
	var h1 = document.querySelector('.h');
	var min1 = document.querySelector('.min');
	var s1 = document.querySelector('.s');
	countDown();
	setInterval(countDown, 1000);

	function countDown() {
		// 获取当前时间的毫秒数
		var now = +new Date();
		// 获取设置日期的毫秒数
		var future = +new Date('2021-01-01 00:00:00');
		// 将设置日期的时间 - 当前时间的毫秒数 除以 1000  得到剩余的总秒数 
		var remain = (future - now) / 1000;
		// 计算当前天数剩余的小时数
		var hour = parseInt(remain / 60 / 60 % 24);
		hour = hour < 10 ? '0' + hour : hour;
		h1.innerHTML = hour;
		// 计算当前小时剩余的分钟数
		var min = parseInt(remain / 60 % 60);
		min = min < 10 ? '0' + min : min;
		min1.innerHTML = min;
		// 计算当前分钟剩余的秒数
		var second = parseInt(remain % 60);
		second = second < 10 ? '0' + second : second;
		s1.innerHTML = second;
	}

	if ((navigator.userAgent.match(
			/(phone|pad|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
		))) {
		window.location.href = 'file:///D:/phpstudy_pro/WWW/2010/day011/flexible-snyg/index.html' //手机
	}


	// console.log(main.offsetTop);
	// var callTop = document.querySelector('.callTop');
	// callTop.addEventListener('click', function() {
	//     window.scroll(0, main.offsetTop);
	// })

	// window.addEventListener('scroll', function() {
	//     console.log('DTD : ' + document.documentElement.scrollTop);
	//     console.log('未声明 :' + document.body.scrollTop);
	//     // console.log('H5 :   ' + window.pageYOffset);


	// })

	// 获取页面中区域块元素距离页面顶部的距离
	// 头部导航栏
	var nav = document.querySelector('nav').offsetTop;
	// 搜索模块
	var search = document.querySelector('.logo_search_shopcar').offsetTop;
	// 热搜商品
	var shop_hot = document.querySelector('.shop_hot').offsetTop;
	// 主体部分 焦点图
	var main = document.querySelector('.main').offsetTop;
	// 秒杀
	var miaosha = document.querySelector('.miaosha').offsetTop;
	// 页脚部分
	var footer = document.querySelector('footer').offsetTop;
	// 将获取到的区域块距离顶部的距离变量设置为一个数组
	var scrollLink = [nav, search, shop_hot, main, miaosha, footer];
	// 获取左侧电梯导航
	var leftMenu = document.querySelector('.leftMenu');
	// 获取左侧电梯导航中的每一层
	var lis = leftMenu.children[0].children;
	// 循环给电梯导航层注册点击事件  点击实现跳转到所匹配的区域块
	for (var i = 0; i < lis.length; i++) {
		// 使用选项卡原理 给每一层设置自定义属性 从0开始
		lis[i].setAttribute('data-index', i);
		// 给每隔层注册点击事件
		lis[i].addEventListener('click', function() {
			// window.scroll(x, y);
			// 获取当前电梯层的自定义属性的值 
			var index = this.getAttribute('data-index');
			// 使用scroll()方法 X轴为0 Y轴为获取到的区域块距离顶部的距离  使用数组的访问方式 与所点击的电梯层一一对应
			// window.scroll(0, scrollLink[index]);

			// animateCol(obj, target, interval, callback)
			animateCol(document, scrollLink[index], 10);

		})
	}
	// 获取电梯导航距离顶部的距离 减去 主题部分距离顶部的值 得到电梯导航的顶部到主题部分顶部的距离
	var leftMenuFixedTop = leftMenu.offsetTop - main;
	// 获取返回顶部元素
	var callTop = leftMenu.children[0].children[lis.length - 1];
	// console.log(callTop);
	// 因为滚动的是页面 所以事件源是window  事件类型为滚动事件 scroll  
	window.addEventListener('scroll', function() {
		// console.log(main);
		// console.log(mainScroll);
		// 获取整个页面被卷去的头部
		var pageScroll = window.pageYOffset;
		console.log(pageScroll);
		// 判断当页面卷去的头部大于等于 主体部分距离页面的距离时
		if (pageScroll >= main) {
			// 让电梯导航的定位为固定定位
			leftMenu.style.position = 'fixed';
			//并且将电梯导航的顶部到主题部分顶部的距离的值赋值给电梯导航的top
			leftMenu.style.top = leftMenuFixedTop + 'px';
			// 当当页面卷去的头部大于等于 主体部分距离页面的距离时 让callTop显示
			callTop.style.display = 'block';
		} else {
			// 否则取反
			leftMenu.style.position = 'absolute';
			leftMenu.style.top = '200px';
			callTop.style.display = 'none';
		}
	})

	var callTop = document.querySelector('.callTop');
	callTop.addEventListener('click', function() {
		animateCol(document, 0, 20);
	})




	// 轮播图
	// 1. 鼠标经过focus时 左右按钮显示隐藏
	var arrow = document.querySelector('.arrow');
	console.log(arrow);

	var arrow_l = arrow.querySelector('.arrow_left');
	var arrow_r = arrow.querySelector('.arrow_right');
	var focus = document.querySelector('.main_focus');
	//获取焦点图的宽度
	var focusImgWidth = focus.offsetWidth;
	// 获取ul ol
	var ul = focus.querySelector('ul');
	var ol = focus.querySelector('ol');
	// 声明一个全局的circle变量
	var circle = 0;
	// 声明右侧按钮的变量
	var num = 0;

	arrow_r.addEventListener('mouseover',function(){
		
		clearInterval(timer);
		
	})

	focus.addEventListener('mouseover', function() {
		arrow_l.style.display = 'block';
		arrow_r.style.display = 'block';
		clearInterval(timer);
	})
	focus.addEventListener('mouseout', function() {
		arrow_l.style.display = 'none';
		arrow_r.style.display = 'none';
		timer = setInterval(function() {
			// 手动调用右侧按钮点击事件
			arrow_r.click();
		}, 2000)
	})
	// 循环实现小圆圈跟随图片的个数 并且添加点击事件
	for (var i = 0; i < ul.children.length; i++) {
		var li = document.createElement('li');
		li.setAttribute('data-index', i);
		ol.appendChild(li);
		li.addEventListener('click', function() {
			// 干掉其他人
			for (var i = 0; i < ol.children.length; i++) {
				ol.children[i].className = '';
			}
			// 留下我自己
			this.className = 'current';
			// 获取ol中li 的 自定义属性
			var index = this.getAttribute('data-index');
			// console.log(index);
			// ul.style.left = -index * focusImgWidth + 'px';
			animate(ul, -index * focusImgWidth, 10);
			// circle = index;
			// num = index;
			num = circle = index;

		})
	}
	ol.children[0].className = 'current';
	//  克隆ul的第一个li
	var first = ul.children[0].cloneNode(true);
	ul.appendChild(first);

	// 右侧点击按钮
	arrow_r.addEventListener('click', function() {

		if (num == ul.children.length - 1) {
			num = 0;
			ul.style.left = 0;
		}
		num++;
		animate(ul, -num * focusImgWidth, 10);
		circle++;
		if (circle == ol.children.length) {
			circle = 0;
		}

		for (var i = 0; i < ol.children.length; i++) {
			ol.children[i].className = '';
		}
		ol.children[circle].className = 'current';

	})
	// 左侧点击按钮
	arrow_l.addEventListener('click', function() {

		if (num == 0) {
			num = ul.children.length - 1;
			ul.style.left = -num * focusImgWidth + 'px';
		}
		num--;
		animate(ul, -num * focusImgWidth, 10);

		if (circle == 0) {
			circle = ol.children.length;
		}
		circle--;
		for (var i = 0; i < ol.children.length; i++) {
			ol.children[i].className = '';
		}
		ol.children[circle].className = 'current';

	})

	// 轮播图自动播放功能
	var timer = setInterval(function() {
		// 手动调用右侧按钮点击事件
		arrow_r.click();
	}, 2000)

})
